<div class="panel panel-success">
    <div class="panel-heading">
        <h3 class="panel-title">Confirmar pedido</h3>
    </div>
    <form id="frmConfirmarPedido" class="form-horizontal" name="frmConfirmarPedido" method="POST" role="form">
        <div class="panel-body">
            <div class="well well-sm">
                <p class="lead">Franja Horaria</p>
                <p>Seleccioná la fecha y franja horaria para pasar a retirar tu pedido.</p>
                <p>Tenga en cuenta que los dias no habiles no se trabaja ni se pueden retirar los pedidos.</p>
            </div>
            <div class="form-group">
                <!-- <label for="txtComentario" class="col-sm-2 control-label">Comentario:</label>
                <div class="col-sm-4">
                    <textarea id="txtComentario" class="form-control" name="txtComentario" rows="3" readonly="readonly">{Comentario}</textarea>
                </div> -->
                <label for="txtRetiro" class="col-sm-2 control-label">Retiro</label>
                <div class="col-sm-4">
                    <div class="input-group">
                        <input id="txtRetiro" class="form-control" type="text" name="txtRetiro" value="{DiaRetiro} {HoraRetiro}" readonly="readonly">
                        <span class="input-group-btn">
                            <button id="btnMostrarCalendario" class="btn btn-primary" type="button">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </button>
                        </span>
                    </div>
                </div>
                <!-- <label for="ddlFranja" class="col-sm-2 control-label">Franja horaria</label>
                <div class="col-sm-4">
                    <select id="ddlFranja" class="form-control" name="ddlFranja">
                        {combo_franja}
                    </select>
                </div> -->
            </div>
            <div class="form-group">

            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Codigo</th>
                        <th>Titulo</th>
                        <th>Anillado</th>
                        <th>Abrochado</th>
                        <th>Simple Faz</th>
                        <!-- <th>Cantidad</th> -->
                        <th>Precio</th>
                    </tr>
                </thead>
                <tbody>
                    {table_detail}
                </tbody>
            </table>
        </div>
        <div class="panel-footer">
            <div class="form-group">
                <label for="chkAnilladoCompleto" class="col-sm-offset-6 col-sm-2 control-label">&iquest;Anillado Completo?</label>
                <div class="col-sm-1">
                    <div class="checkbox">
                        <input type="checkbox" class="form-control-static" style="margin: 0px; width: 1.5em; height: 1.5em;" name="chkAnilladoCompleto" disabled="disabled" {TodoAnillado}/>
                        <input type="hidden" name="hidAnilladoCompleto" value="{TodoAnillado}" />
                    </div>
                </div>
                <label for="txtSubTotal" class="col-sm-1 control-label">Subtotal</label>
                <div class="col-sm-2">
                    <input id="txtSubTotal" class="form-control" type="number" name="txtSubTotal" value="{SubTotal}" readonly="readonly" placeholder="Subtotal"/>
                </div>
            </div>
            <div class="form-group">
                <label for="btnSi" class="col-sm-offset-6 col-sm-4 control-label">&iquest;Son correctos los items del pedido?</label>
                <div class="col-sm-2">
                    <button id="btnSi" class="btn btn-success" type="submit" name="btnSi">
                        <span class="glyphicon glyphicon-ok"></span> Si
                    </button>
                    <a id="btnNo" class="btn btn-danger" href="index.php?do=/estudiante/create" role="button">
                        <span class="glyphicon glyphicon-remove"></span> No
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>
<link rel="stylesheet" type="text/css" href="/public/css/jquery.datetimepicker.css" />
<script type="text/javascript" src="/public/js/jquery.datetimepicker.js"></script>
<script type="text/javascript">
    var limitDate = new Date("{DiaRetiro} {HoraRetiro}");
    
    var logic = function(selectedDateTime) {
        if(limitDate >= selectedDateTime){
            this.setOptions({
                minDate: "{DiaRetiro}",
                minTime: "{HoraRetiro}"
            });
	} else {
            this.setOptions({
                minDate: 0,
                minTime: false
            });
        }
    };
    
    var logic2 = function(selectedDate, $input) {
        if(selectedDate <= limitDate) {
            this.setOptions({
                value: "{DiaRetiro} {HoraRetiro}"
            });
        } else {
            this.setOptions({
                value: null
            });
        };
    };
    
    $("#txtRetiro").datetimepicker({
        onGenerate: function(ct) {
            $(this).find('.xdsoft_date.xdsoft_weekend').addClass('xdsoft_disabled');
	},
        onChangeDateTime: logic,
        onShow: logic,
        onSelectDate: logic2,
        closeOnDateSelect: false,
        format: "Y-m-d H:i",
        formatDate: "Y-m-d",
        formatTime: "H:i",
        allowTimes: [{FranjaRango}],
        weekends: ['01.01.2014','02.01.2014','03.01.2014','04.01.2014','05.01.2014','06.01.2014']
    });
    
    $("#btnMostrarCalendario").click(function() {
        $("#txtRetiro").datetimepicker("show");
    });
    
    $("form[name=frmConfirmarPedido]").submit(function(e) {
        var selectedDate = new Date($("#txtRetiro").val());
        if (limitDate.getTime() > selectedDate.getTime()) {
            e.preventDefault();
            alert("La fecha y horario que eligio para retirar el pedido no esta dentro del rango aceptado.");
        }
    });
</script>